<html>
  <head>
    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
    <style>
      body {
        /* background: rgb(221, 208, 208); */
        /* background:#333; */
        font-family: 'Arial';
      }
      h1 {
        color: #333;
        font-size: 20px;
        text-decoration: underline;
      }
      .mermaid2 {
        display: none;
      }
      .dark {
        background: #333;
      }
      .dark h1 {
        color: #f4f4f4;
      }
      .size {
        width: 33%;
        height: 250px;
      }
    </style>
  </head>
  <body>
    <div class="flex flex-wrap">
      <div class="size">
        <h1>Default</h1>
        <pre class="mermaid">
  %%{init: { 'logLevel': 0, 'theme': 'default'} }%%
  graph TD
            A(Start) --> B[/Another/]
            A[/Another/] --> C[End]
            subgraph section
              B
              C
            end
        </pre>
      </div>
      <div class="size">
        <h1>Forest</h1>
        <pre class="mermaid">
  %%{init: { 'logLevel': 1, 'theme': 'forest'} }%%
  graph TD
            A(Start) --> B[/Another/]
            A[/Another/] --> C[End]
            subgraph section
              B
              C
            end
        </pre>
      </div>
      <div class="size">
        <h1>Neutral</h1>
        <pre class="mermaid">
        %%{init: { 'logLevel': 1, 'theme': 'neutral'} }%%
  graph TD
            A(Start) --> B[/Another/]
            A[/Another/] --> C[End]
            subgraph section
              B
              C
            end
        </pre>
      </div>
      <div class="size dark">
        <h1>Dark</h1>
        <pre class="mermaid">
        %%{init: { 'logLevel': 1, 'theme': 'dark'} }%%
  graph TD
            A(Start) --> B[/Another/]
            A[/Another/] --> C[End]
            subgraph section
              B
              C
            end
        </pre>
      </div>
      <div class="size">
        <h1>Base with overriding themeVariable</h1>
        <pre class="mermaid">
        %%{init: { 'theme': 'base', 'themeVariables':{ 'primaryColor': '#ff0000'}}}%%

  graph TD
            A(Start) --> B[/Another/]
            A[/Another/] --> C[End]
            subgraph section
              B
              C
            end
        </pre>
      </div>
      <div class="size">
        <h1>Nothing set, should be Default</h1>
        <pre class="mermaid">
        %%{init: { 'logLevel': 1} }%%

  graph TD
            A(Start) --> B[/Another/]
            A[/Another/] --> C[End]
            subgraph section
              B
              C
            end
        </pre>
      </div>
    </div>

    <script type="module">
      import mermaid from './mermaid.esm.mjs';

      mermaid.initialize({
        logLevel: 0,
        graph: { curve: 'cardinal', htmlLabels: false },
        sequence: { actorMargin: 50, showSequenceNumbers: true },
        fontFamily: '"arial", sans-serif',
        curve: 'cardinal',
        securityLevel: 'strict',
        startOnLoad: false,
      });

      await mermaid.run();

      if (window.Cypress) {
        window.rendered = true;
      }
    </script>
  </body>
</html>
